<template>
  <div>
    <div id="box" v-if="isShowMusic">
      <audio
        ref="audio"
        src="../assets/By2 - 你并不懂我 - 副本.mp3"
        @loadedmetadata="fillTime($event)"
        @timeupdate.stop="updateProgress"
        @ended.stop="audioEnded"
      ></audio>

        <img
        src="../assets/image/audio/audio_play.png"
        class="play-icon"
        alt=""
        @click="playAudio"
        v-if="button"
      />
      <img
        src="../assets/image/audio/audio_pause.png"
        class="play-icon"
        alt=""
        @click="playAudio"
        v-else
      />


      <div class="progress-time">{{ audioArr.currentTime }}</div>
      <div class="progress-bar" @touchend="touchend">
        <div
          class="progress"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
        ></div>
        <div
          class="bar"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
        ></div>
      </div>
      <div class="sum-time">
        {{ audioArr.duration || audioArr.currentTime }}
      </div>
      <div class="close" @click="isShowMusic=false">X</div>
    </div>
    <div id="next">
      <button @click="next">下一首</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowMusic: true,
      button: false,
      audioArr: { duration: "", currentTime: "0:00:00" }, // 用于维护 audio 的总时长和当前播放时间的数组
    };
  },
  mounted() {
  },
  methods: {

    touchstart(e) {
      e.preventDefault();
    },

    touchmove(e) {
      if(!this.isShowMusic) return 
      e.preventDefault();
      let bar = document.querySelector(".progress-bar");
      let dot = document.querySelector(".bar");
      let bar_width = bar.offsetWidth;
      let bar_after = document.querySelector(".progress");
      let moveEndX = e.changedTouches[0].pageX;
      // 拖拽进度条区域限制
      // console.log(55,moveEndX);
      // console.log(66,bar.offsetLeft);
      if (moveEndX < bar.offsetLeft) {
        moveEndX = bar.offsetLeft;
      } else if (moveEndX - bar.offsetLeft >= bar_width ) {
        moveEndX = bar_width  + bar.offsetLeft -1; //-1是拉到最后防止播放完回到起点
        
      }
      // 动态拖拽 进度条 变化长度
      bar_after.style.width = moveEndX - bar.offsetLeft + "px";
      dot.style.left = moveEndX - bar.offsetLeft + "px";

      // 拖拽进度条变更音乐时间
     
      this.$refs.audio.currentTime =
        this.$refs.audio.duration *
        ((moveEndX - bar.offsetLeft) / bar.offsetWidth);
     
    },

    touchend(e) {
     if(!this.isShowMusic) return 
      e.preventDefault();
      let bar = document.querySelector(".progress-bar");
      let dot = document.querySelector(".bar");
      let bar_width = bar.offsetWidth;
      let bar_after = document.querySelector(".progress");
      let moveEndX = e.changedTouches[0].pageX;
      if (moveEndX < bar.offsetLeft) {
        moveEndX = bar.offsetLeft ;

      } else if (moveEndX - bar.offsetLeft >= bar_width ) {
        moveEndX = bar_width  + bar.offsetLeft -1;//-1是拉到最后防止播放完回到起点
      }

      // 动态点击 进度条 变化长度
      bar_after.style.width = moveEndX - bar.offsetLeft + "px";
      dot.style.left = moveEndX - bar.offsetLeft + "px";

      
      // 点击进度条更新音乐时间
      this.$refs.audio.currentTime =
        this.$refs.audio.duration *
        ((moveEndX - bar.offsetLeft) / bar.offsetWidth);
    },

    // 切换播放，暂停按钮的事件
    playAudio() {
      this.button = !this.button;
      let audio = this.$refs.audio;
      // console.log(this.$refs.audio);
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    },

    // 获取音频的总时长
    fillTime(event) {
      console.log(1,event);
      this.audioArr.duration = this.transTime(event.target.duration);
    },

    // 将秒数转化成(分:秒)格式
    transTime(time) {
      let duration = parseInt(time);
      let hour= parseInt(duration/3600).toString().padStart(1, "0");
      let minute = parseInt((duration-hour*3600) / 60).toString().padStart(2, "0");
      let sec = (duration % 60).toString().padStart(2, "0");
      return `${hour}:${minute}:${sec}`;
    },

    // 进度条播放的事件
    updateProgress() {
      if(!this.isShowMusic) return 
      let bar = document.querySelector(".progress-bar");
      let dot = document.querySelector(".bar");
      let bar_width = bar.offsetWidth;
      let bar_after = document.querySelector(".progress");
      let audio = this.$refs.audio;
      let value = Math.round(
        (Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100,
        0
      );
      this.audioArr.currentTime = this.transTime(audio.currentTime);

      //音乐播放进度条变化 
      bar_after.style.width = (value / 100) * bar.offsetWidth + "px";
      dot.style.left = (value / 100) * bar.offsetWidth + "px";
    },

    // 播放结束的处理动作
    audioEnded() {
      this.button=false
      let audio = this.$refs.audio;
      audio.currentTime = 0;
      audio.pause();
    },

    // 下一首/换歌
    next(){
      // let bar = document.querySelector(".progress-bar");
      // let dot = document.querySelector(".bar");
      // let bar_width = bar.offsetWidth;
      // let bar_after = document.querySelector(".progress");
      // let audio = this.$refs.audio;
      
      // bar_after.style.width = '' ;
      // dot.style.left = '' ;
      // this.button=false
      // audio.src='http://m801.music.126.net/20210401181006/cc51676142d32f68a0c62d05797f1fb4/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/4959745806/482a/1a84/ca27/02c0f32c8c1b78a97988cebbee2ede1b.mp3'
    }
  },
};
</script>

<style lang="less" scoped>
#box {
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: 30px;
  // padding:0 10px ;
  background-color: #2260e7;
  align-items: center;
  justify-content: space-around;
  .progress-bar {
    width: 40%;
    height: 6px;
    position: relative;
    background-color: #92b4f4;
    border-radius: 6px;

    .progress {
      width: 0;
      height: 6px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      background-color: #fefcfe;
    }
    .bar {
      width: 4px;
      height: 13px;
      position: absolute;
      top: -4px;
      background-color: #fefcfe;
    }
  }
  .progress-time {
    width: 54px;
    color: #fefcfe;
  }
  .sum-time {
    width: 54px;
    color: #fefcfe;
  }
  .close {
    color: #fefcfe;
  }
}
</style>